import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import React, { FC } from "react"
import Colors from "../../constants/Colors"
import useColorScheme from "../../hooks/useColorScheme"
import { BottomTabParamList } from "../../types"
import TabBarIcon from "./TabBarIcon"
import HomeNavigator from "./HomeNavigator"
import ExploreNavigator from "./ExploreNavigator"
import NotificationsNavigator from "./NotificationsNavigator"
import MessagesNavigator from "./MessagesNavigator"
/**
 * 底部导航
 */
const BottomTab = createBottomTabNavigator<BottomTabParamList>()
const { Navigator, Screen } = BottomTab

const BottomTabNavigator: FC = () => {
  const colorScheme = useColorScheme()

  return (
    <Navigator
      initialRouteName="Home"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}
    >
      <Screen
        name="Home"
        component={HomeNavigator}
        options={{
          title: "",
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="ios-home" color={color} />
          ),
        }}
      />
      <Screen
        name="Explore"
        component={ExploreNavigator}
        options={{
          title: "",
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="ios-search" color={color} />
          ),
        }}
      />
      <Screen
        name="Notifications"
        component={NotificationsNavigator}
        options={{
          title: "",
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="ios-notifications" color={color} />
          ),
        }}
      />
      <Screen
        name="Messages"
        component={MessagesNavigator}
        options={{
          title: "",
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="ios-mail" color={color} />
          ),
        }}
      />
    </Navigator>
  )
}

export default BottomTabNavigator
